\n\n프론트 엔드 면접 질문용 공부 후 정리 자료입니다. 정확하지 않을 수 있으니 꼭 다시 책이나 자료를 참고하여 공부하세요
\n
this를 바인딩하기 위한 방법
\n// call\nconst obj1 = { name: \"Call\" };\nconst say1 = function (city) {\n console.log(Hello, my name is ${this.name}, I live in ${city});\n};\nsay1.call(obj1, \"callcity\");\n\n// apply\nconst obj2 = { name: \"Apply\" };\nconst say2 = function (city) {\n console.log(Hello, my name is ${this.name}, I live in ${city});\n};\nsay2.apply(obj2, [\"applycity\"]);\n\n// bind\nconst obj3 = { name: \"Bind\" };\nconst say3 = function (city) {\n console.log(Hello, my name is ${this.name}, I live in ${city});\n};\nconst boundSay = say3.bind(obj3);\nboundSay(\"bindcity\");'use strict';\nvar x = this;\nconsole.log(x); //Windowfunction myFunction() {\n return this;\n}\nconsole.log(myFunction()); //Window\nvar num = 0;\nfunction addNum() {\n this.num = 100;\n num++;\n \n console.log(num); // 101\n console.log(window.num); // 101\n console.log(num === window.num); // true\n}\n \naddNum();\n\n//위 코드에서 this.num의 this는 window 객체를 가리킵니다.\n//따라서 num은 전역 변수를 가리키게 됩니다.\"use strict\";\n \nfunction myFunction() {\n return this;\n}\nconsole.log(myFunction()); //undefined\n\"use strict\";\n \nvar num = 0;\nfunction addNum() {\n this.num = 100; //ERROR! Cannot set property 'num' of undefined\n num++;\n}\n \naddNum();\n\n// 따라서 this.num을 호출하면 undefined.num을 호출하는 것과 마찬가지기 때문에 에러가 납니다.var person = {\n firstName: 'John',\n lastName: 'Doe',\n fullName: function () {\n return this.firstName + ' ' + this.lastName;\n },\n};\nperson.fullName(); //\"John Doe\"\n\nvar num = 0;\nfunction showNum() {\n console.log(this.num);\n}\nshowNum(); //0\n \nvar obj = {\n num: 200,\n func: showNum,\n};\nobj.func(); //200var btn = document.querySelector('#btn')\nbtn.addEventListener('click', function () {\n console.log(this); //#btn\n});function Person(name) {\n this.name = name;\n}\n \nvar kim = new Person('kim');\nvar lee = new Person('lee');\n \nconsole.log(kim.name); //kim\nconsole.log(lee.name); //leevar name = 'window';\nfunction Person(name) {\n this.name = name;\n}\n \nvar kim = Person('kim');\n \nconsole.log(window.name); //kimfunction whoisThis() {\n console.log(this);\n}\nwhoisThis(); //window\nvar obj = {\n x: 123,\n};\nwhoisThis.call(obj); //{x:123}function Character(name, level) {\n this.name = name;\n this.level = level;\n}\n \nfunction Player(name, level, job) {\n this.name = name;\n this.level = level;\n this.job = job;\n}function Character(name, level) {\n this.name = name;\n this.level = level;\n}\n \nfunction Player(name, level, job) {\n Character.apply(this, [name, level]);\n this.job = job;\n}\n \nvar me = new Player('Nana', 10, 'Magician');function Character(name, level) {\n this.name = name;\n this.level = level;\n}\n \nfunction Player(name, level, job) {\n Character.call(this, name, level);\n this.job = job;\n}\n \nvar me = {};\nPlayer.call(me, 'nana', 10, 'Magician');function func(a, b, c) {\n console.log(arguments);\n arguments.push('hi!'); //ERROR! (arguments.push is not a function);\n}\n\nfunction func(a, b, c) {\n var args = Array.prototype.slice.apply(arguments);\n args.push('hi!');\n console.dir(args);\n}\n \nfunc(1, 2, 3); // [ 1, 2, 3, 'hi!' ]\nvar list = {\n 0: 'Kim',\n 1: 'Lee',\n 2: 'Park',\n length: 3,\n};\n \nArray.prototype.push.call(list, 'Choi');\nconsole.log(list);var children = document.body.children; // HTMLCollection\n \nchildren.forEach(function (el) {\n el.classList.add('on'); //ERROR! (children.forEach is not a function)\n});\nvar children = document.body.children; // HTMLCollection\n \nArray.from(children).forEach(function (el) {\n el.classList.add('on'); \n});var Person = function (name, age) {\n this.name = name;\n this.age = age;\n this.say = function () {\n console.log(this); // Person {name: \"Nana\", age: 28}\n \n setTimeout(function () {\n console.log(this); // Window\n console.log(this.name + ' is ' + this.age + ' years old');\n }, 100);\n };\n};\nvar me = new Person('Nana', 28);\n \nme.say(); //global is undefined years old\n\n// --------------------------------------------------------------------\n// --------------------------------------------------------------------\n\n\nvar Person = function (name, age) {\n this.name = name;\n this.age = age;\n this.say = function () {\n console.log(this); // Person {name: \"Nana\", age: 28}\n \n setTimeout(() => {\n console.log(this); // Person {name: \"Nana\", age: 28}\n console.log(this.name + ' is ' + this.age + ' years old'); \n }, 100);\n };\n};\nvar me = new Person('Nana', 28); //Nana is 28 years oldvar x = \"global\";\nfunction foo() {\n var x = \"local\";\n console.log(x);\n // \"local\"\n}\nfoo();\nconsole.log(x);\n// \"global\"| 구분 | \n설명 | \n스코프 | \n변수 | \n
|---|---|---|---|
| 전역 | \n코드의 가장 바깥 영역 | \n전역 스코프 | \n전역 변수 | \n
| 지역 | \n함수 몸체 내부 | \n지역 스코프 | \n지역 변수 | \n
const person = {\n name: \"Lee\",\n};\nconsole.log(Object.getOwnPropertyDescriptor(person, \"name\"));\n\n// { value: 'Lee', writable: true, enumerable: true, configurable: true }foo() // 'FOOOOO'\nfunction foo() {\n console.log('FOOOOO')\n}foo() // Uncaught TypeError: foo는 함수가 아닙니다\nvar foo = function() {\n console.log('FOOOOO')\n}var foo = 123; // 전역 변수\nconsole.log(foo); // 123\n{\n var foo = 456; // 전역 변수\n}\nconsole.log(foo); // 456q함수 내에서 값을 변경하면 함수에 전달된 데이터만 변경될 뿐 함수 전달된 원본 복사본에는 아무런 영향을 미치지 않는다.
\nlet a = 1;\nlet fun = funcion(b) {\n\tb=b+1;\n}\nfun(a)\nconsole.log(a) // 1원본 변수와 할당된 변수는 모두 동등하며, 값을 조작하는데 사용될 수 있다. 그래서 할당된 변수(참조)가 변경되면 원본 변수에서도 동일하게 변경된다.
\nlet a = {};\nlet fun = funcion(b) {\n\tb.a=1;\n}\nfun(a)\nconsole.log(a.a) // 1const str = 'zzz'; \nconsole.log(typeof 2); // 'number' \nconsole.log(typeof str); // 'string' \nconst obj = {}; \nconsole.log(obj instanceof Object); // true \nconsole.log(str instanceof String); // false str 는 원시타입 문자열이기 때문객체 안의 속성과 배열의 아이템을 순회할 때 사용하는 문법:
\nfor-in 루프
\nObject.keys(obj).forEach(property ⇒ { … })
\nObject.getOwnPropertyNames()
\nDOM트리를 읽음:
\n![\"img\"](\"https://t1.daumcdn.net/cfile/tistory/2210F643570307E233\")
\nvar lib = require(\"package/lib\");\nfunction foo() {\n\tlib.log(\"hello world!\");\n}\n\nexports.foobar = foo; define([\"package/lib\"], function (lib) {\n function foo() {\n \tlib.log(\"hello world!\");\n }\n return {\n foobar : foo\n }\n}